<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<c:set var="companyId" value="18" ></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
       <meta charset="UTF-8">
       <title>phone</title>
       <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
       <!-- 删除苹果默认的工具栏和菜单栏 -->
       <meta name="apple-mobile-web-app-capable" content="yes" />
       <!-- 设置苹果工具栏颜色 -->
       <meta name="apple-mobile-web-app-status-bar-style" content="black" />
       <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
       <meta name="format-detection" content="telphone=no, email=no" />
       <!-- 启用360浏览器的极速模式(webkit) -->
       <meta name="renderer" content="webkit">
       <!-- 避免IE使用兼容模式 -->
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
       <meta name="HandheldFriendly" content="true">
       <!-- 微软的老式浏览器 -->
       <meta name="MobileOptimized" content="320">
       <!-- uc强制竖屏 -->
       <meta name="screen-orientation" content="portrait">
       <!-- QQ强制竖屏 -->
       <meta name="x5-orientation" content="portrait">
       <!-- UC强制全屏 -->
       <meta name="full-screen" content="yes">
       <!-- QQ强制全屏 -->
       <meta name="x5-fullscreen" content="true">
       <!-- UC应用模式 -->
       <meta name="browsermode" content="application">
       <!-- QQ应用模式 -->
       <meta name="x5-page-mode" content="app">
       <!-- windows phone 点击无高光 -->
       <meta name="msapplication-tap-highlight" content="no">
       <!-- 适应移动端end -->
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width,initial-scale=1,maximum-   scale=1,user-scalable=no">
       <meta name="format-detection" content="telephone=no">
       <meta name="renderer" content="webkit">
       <meta http-equiv="Cache-Control" content="no-siteapp">
        <link rel="stylesheet" href="${path }/websites/demophone/font-awesome/css/font-awesome.css" media="screen" title="no title">
        <link rel="stylesheet" href="${path }/websites/demophone/plugin/AmazeUI-2.7.2/assets/css/amazeui.min.css">
         <link rel="stylesheet" href="${path }/websites/demophone/plugin/iconfont/iconfont.css">
       <link rel="stylesheet" href="${path }/websites/demophone/css/base.css" media="screen" title="no title">
       <link rel="stylesheet" href="${path }/websites/demophone/css/public.css">
       <script src="${path }/websites/demophone/js/TouchSlide.1.1.js" type="text/javascript"></script>
       <script src="${path }/websites/demophone/plugin/jquery/jquery-3.1.1.js"></script>
       <script src="${path }/websites/demophone/js/index.js" type="text/javascript"></script>
       <cms:setting companyId="${companyId }" var="title" code="title"></cms:setting>
			<title data-index="0" id="selextTitle">${title.paramValue }</title>
       </head>
<body>
  <jsp:include page="_top2.jsp"></jsp:include>
  <div class="con-title ">
                   <div class="con-bg"></div>
                   <div class="text-content">新闻资讯</div>
                   <a href="news2-second.html" class="right-link"></a>
                </div> 
                <div class="banner news-banner">
                    <img src="${path }/websites/demopc/images/newsbanner.jpg" alt="" />
                    <!-- <div class="news-txt">
                        <p>被认定为国家规划府信息化</p>
                    </div> -->
                </div>
                 <div id="app">
                <div v-for="art in arts"  class="news-list-title" >
                    <ul>
                   		 <li>
                        <a  :href="'${path}/websites/demophone/views/news-details2.jsp?id='+art.artId" style="margin-left:20px">
                       {{art.artCreatetiem | getDate}}&nbsp;&nbsp;&nbsp;&nbsp; {{art.artTitle}}
                        </a>
                       <span> {{art.artAbstract}}</span>
                       
                    </ul>
                     
                </div>
                 </div>
                 <div class="case-page" >
                         <div class="page page-up">
                         <a href="javascript:" onclick="lastPage();"><span>上一页</span></a>
                         </div>
                         <ul class="page-number"  style="margin-left:10%">
                             <li id="nowPage">1</li>
                             <li>/</li>
                             <li id="pageCount">1</li>
                         </ul>
                         <div class="page page-down">
                            <a href="javascript:" onclick="nextPage();">  <span>下一页</span></a>
                         </div>
                     </div>
  <jsp:include page="_foot2.jsp"></jsp:include>
   <script src="${path }/websites/demopc/js/wow.min.js"></script>
 <script type="text/javascript"
		src="${path }/resource/js/systools/AjaxProxy.js"></script>
	<script type="text/javascript"
		src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
	<script src="https://unpkg.com/vue/dist/vue.js"></script> 
   <script>
        if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
        new WOW().init();
    };
   
	var app = new Vue({
		el : '#app',
		data : {
			offset : 0,
			limit : 3,
			more : "none",
			artTypeId:null,
			pageCount:0,
			artTypeName:"新闻",
			companyId:18,
			arts : []
		},
		filters : {
			getDate : function(value) {
				var data = new Date(value);
				return data.getFullYear() + "/" + (data.getMonth() + 1)+ "/"+data.getDay() ;
			}
		},
		methods : {
			toPage : function(nowPage) {
				var offset=(nowPage-1)*app.limit;
				$.AjaxProxy({
					c : false,
					p : {
						"offset" :offset,
						"limit" : app.limit,
						"artTypeId":app.artTypeId,
						"companyId":app.companyId
					}
				}).invoke("${path}/spring/web/findNews", function(loj) {
					if (loj.getValue("rows").length < 1) {
						app.more = "block";
					} else {
						app.arts = loj.getValue("rows");
						
						app.offset += app.limit;
					}
				}); 
			},
			loadArt : function() {
				$.AjaxProxy({
					c : false,
					p : {
						"artTypeId":app.artTypeId,
						"companyId":app.companyId
					}
				}).invoke("${path}/spring/web/findNews", function(loj) {
					 var count=0;
					var total=loj.getValue("rows").length;
					var limit=app.limit;
					if(parseInt(total)%limit==0){
						count=parseInt(total)/limit;
					}else{
						count=parseInt(parseInt(total)/limit)+1;
					}
					app.pageCount=count;
					console.log(total,count);
					$("#pageCount").html(count);
					$.AjaxProxy({
						c : false,
						p : {
							"offset" : app.offset,
							"limit" : app.limit,
							"artTypeId":app.artTypeId,
							"companyId":app.companyId
						}
					}).invoke("${path}/spring/web/findNews", function(loj) {
						if (loj.getValue("rows").length < 1) {
							app.more = "block";
						} else {
							app.arts = app.arts.concat(loj.getValue("rows"));
							app.offset += app.limit;
							
						}
					}); 
				});
			},
		},
	});
	app.loadArt();
	
	function nextPage(){
		var nowPage=parseInt($("#nowPage").html());
		var pageCount=parseInt($("#pageCount").html());
		if((nowPage+1)>=pageCount){
			nowPage=pageCount;
		}else{
			nowPage+=1;
		}
		$("#nowPage").html(nowPage);
		app.toPage(nowPage);
	};
	
	function lastPage(){
		var nowPage=parseInt($("#nowPage").html());
		var pageCount=parseInt($("#pageCount").html());
		if((nowPage-1 )<=1){
			nowPage=1;
		}else{
			nowPage-=1;
		}
		$("#nowPage").html(nowPage);
		app.toPage(nowPage);
	}
    </script>
</body>
</html>